<%@page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>默认右侧页面</title>

<%@include file="/WEB-INF/page/common/include/head.jsp"%>
<script type="text/javascript">
	$(function(){
		$("#open1").click(function(){
			$("#win1").dialog();
		});
		
		$("#win2").dialog({
			autoOpen: false,
			show: {
				effect: "blind",
				duration: 1000
			},
			hide: {
				effect: "explode",
				duration: 1000
			}
		});

		$("#open2").click(function() {
			$("#win2").dialog("open");
		});
		
		
		$("#open3").click(function() {
			$("#win3").dialog({
				autoOpen: true,
				show: {
					effect: "blind",
					duration: 1000
				},
				hide: {
					effect: "explode",
					duration: 1000
				}
			});
		});
		
		$("#open4").click(function() {
			$("#win4").dialog({
				autoOpen: true,
				modal: true,
				show: {
					effect: "blind",
					duration: 1000
				},
				hide: {
					effect: "explode",
					duration: 1000
				}
			});
		});
		
		$("#open5").click(function() {
			$("#win5").dialog({

				resizable: false,
				height:140,
				modal: true,
				buttons: {
					"按钮1": function() {
						$(this).dialog("close");
					},
					"按钮2": function() {
						$(this).dialog("close");
					},
					Cancel: function() {
						$(this).dialog("close");
					},
					Ok: function() {
						$(this).dialog("close");
					}
				},
				show: {
					effect: "blind",
					duration: 1000
				},
				hide: {
					effect: "explode",
					duration: 1000
				}
			});
		});
		
		$("#open6").click(function() {
			$.openWinUrl({url:"http://localhost:8080/yly/login.jsp", title:"我是title"}, {
				resizable: false,
				width:1000,
				height:500,
				modal: true,
				buttons: {
					"按钮1": function() {
						$(this).dialog("close");
					},
					"按钮2": function() {
						$(this).dialog("close");
					},
					Cancel: function() {
						$(this).dialog("close");
					},
					Ok: function() {
						$(this).dialog("close");
					}
				}
			});
		});
		
		
		
		
	});
</script>
</head>

<body>
	
	<s:action name="getChannel" namespace="/sys/home"  executeResult="true"></s:action>
	
	<div class="module_div">
		<div class="title">
			window——例子
		</div>
		<div class="content">
			<p><a id="open1" style="cursor: pointer;line-height:1.5">打开普通窗口，使用DIV模板</a></p>
			<p><a id="open2" style="cursor: pointer;line-height:1.5">打开普通窗口，使用DIV模板，先设置了open/close的样式， 后调用打开</a></p>
			<p><a id="open3" style="cursor: pointer;line-height:1.5">打开普通窗口，使用DIV模板，设置open/close的样式同时打开</a></p>
			<p><a id="open4" style="cursor: pointer;line-height:1.5">打开模态窗口，使用DIV模板，设置open/close的样式同时打开</a></p>
			<p><a id="open5" style="cursor: pointer;line-height:1.5">打开模态窗口，使用DIV模板，设置open/close的样式同时打开,自定义按钮</a></p>
			<p><a id="open6" style="cursor: pointer;line-height:1.5">打开模态窗口，不使用DIV模板，设置open/close的样式同时打开,自定义按钮，传入URL，title</a></p>
		</div>
	</div>
	
	<div class="module_div">
		<div class="title">
			form——例子
		</div>
		<div class="content">
			<input type="text" value="我是文本框"/></br>
			<input type="password" value="password"/></br>
			<input type="radio" name="r1" value="我是单选"/><label>我是单选</label>
			<input type="radio" name="r1" value="我是单选"/><label>我是单选</label>
			<input type="radio" name="r1" value="我是单选"/><label>我是单选</label><br/>
			<input type="checkbox" name="r2" value="我是多选"/><label>我是多选</label>
			<input type="checkbox" name="r2" value="我是多选"/><label>我是多选</label>
			<input type="checkbox" name="r2" value="我是多选"/><label>我是多选</label><br/>
		
			<select>
				<option>选择1</option>
				<option>选择2</option>
				<option>选择3</option>
			</select>
	
			<br/>
			<textarea rows="10" cols="70"></textarea>
			<br/>
		</div>
	</div>
	
	<div class="module_div">
		<div class="title">
			列表——例子
		</div>
		<div class="content">
			<table>
				<thead>
					<tr>
						<th><font>序号</font></th>
						<th><font>姓名</font></th>
						<th><font>性别</font></th>
						<th><font>岁数</font></th>
						<th><font>备注</font></th>
						<th><font>操作</font></th>
					</tr>
				</thead>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>男</td>
					<td>28</td>
					<td>我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发我都是靠大家发</td>
					<td></td>
				</tr>
				<tr>
					<td>2</td>
					<td>淡蓝色的</td>
					<td>男</td>
					<td>11</td>
					<td>而威尔</td>
					<td></td>
				</tr>
				<tr>
					<td>3</td>
					<td>风陵渡</td>
					<td>女</td>
					<td>16</td>
					<td>淡淡地</td>
					<td></td>
				</tr>
			</table>
		</div>
	</div>
	
	<div id="win1" style="display:none;">
		<p>测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,</p>
	</div>
	
	<div id="win2" title="open2" style="display:none;">
		<p>测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,</p>
	</div>
	
	<div id="win3" title="open3" style="display:none;">
		<p>测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,</p>
	</div>
	
	<div id="win4" title="open4" style="display:none;">
		<p>测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,</p>
	</div>
	
	<div id="win5" title="open5" style="display:none;">
		<p>测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,测试打开窗口,</p>
	</div>
	
</body>
</html>
